import React, { useState } from 'react'
import { Avatar, Image, Layout } from 'antd'

import {
  ContentDetails,
  NavigationMenu,
  NotifyUI,
  SiderMenu,
} from '../components'
import { inject, observer } from 'mobx-react'
import Stores from '../stores'
import './App.less'

import logo from '../static/logov1.png'

const { Header, Content, Sider } = Layout

const App: React.FC<any> = (props: any) => {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Layout className='App'>
      <NotifyUI Status={false} />
      <Layout>
        <Header className='navigation'>
          <div className='title-logo'></div>
        </Header>
      </Layout>
      <Layout>
        <Sider className='sider' collapsed={collapsed}>
          <SiderMenu
            mod='inline'
            // theme='dark'
            className='menu'
            Url={''}
            setCollapsed={setCollapsed}
            collapsed={collapsed}
            HomeStore={Stores.HomeStore}
          />
        </Sider>
        <Layout className='site-layout'>
          <Content className='content'>
            <ContentDetails />
          </Content>
          <div className='footer'>Ant Design ©2018 Created by Ant UED</div>
        </Layout>
      </Layout>
    </Layout>
  )
}

export default inject('HomeStore')(observer(App))
